<template>
  <top-nav>{{viewMessage}}</top-nav>
  <div class="goodsAll">
    <ul>
      <li v-for="(product, index) in products" :key="index">
        <img :src="`http://121.199.173.91/assets/images/${product.photo}`" alt="">
        <div class="goodsBrief">
          <p class="goodsName">{{product.name}}</p>
          <p>{{product.description}}</p>
          <p class="goodsPrice">￥{{product.price}}</p>
        </div>
        <div class="goodsNum">
          <div v-if="product.num > 0" class="goodsMin" @click="minProduct(product)">
            <i class="fa fa-minus-circle"></i>
          </div>
          <p class="Num">
            {{product.num}}
          </p>
          <div class="goodsAdd" @click="addProduct(product)">
            <i class="fa fa-plus-circle"></i>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <shop-cart :cart-items="cartItems"></shop-cart>
</template>

<script>
import TopNav from "@/components/TopNav.vue";
import index from "vuex";
import ShopCart from "@/components/ShopCart.vue";
import request from "@/request";
import qs from "qs";

export default {
  name:"ShopView",
  computed: {
    index() {
      return index
    }
  },
  components:{
    TopNav,
    ShopCart,
  },
  data(){
    return{
      viewMessage:"商家信息",
      products:[],
      cart:[],
      tempInfo:{
        customerId:null,
        shopId:null,
      },
      cartItems:[],
    }
  },
  methods:{
    addProduct(product){
      if(!product.hasOwnProperty("num")){
        product.num = 1;
        this.addToCart(product);
      }else{
        product.num++;
        this.addToCart(product);
      }
    },
    minProduct(product){
      if(!product.hasOwnProperty("num")){
        product.num = 0;
      }else{
        product.num--;
        if(product.num < 0){
          product.num = 0;
        }else{
          this.minusFromCart(product);
        }
      }
    },
    addToCart(product){
      this.cartItems.push(product);
      // request({
      //   method:"put",
      //   url:"/book-service/cart/" + this.tempInfo.customerId + "/plus?shopId=" + this.tempInfo.shopId + "&footId=" + product.id,
      // }).then((respData) => {
      //   console.log(respData.msg);
      // })
    },
    minusFromCart(product){
      request({
        method:"put",
            url:"/book-service/cart/" + this.tempInfo.customerId + "/minus?shopId=" + this.tempInfo.shopId + "&footId=" + product.id,
        data:qs.stringify(this.info),
      }).then((respData) => {
        console.log(respData.msg);
      })
    },
    loadProductInfo(){
      request({
        method:"get",
        url:"/product-service/product/getProductInfo/" + this.tempInfo.shopId,
      }).then((respData) => {
        if(respData.code == 200){
          this.products = respData.data;
        }else{
          console.log(respData.msg);
        }
      }).catch((error) =>{
        console.error(error);
      })
    }
  },
  created(){
    this.tempInfo.customerId = this.$store.state.customerInfo.id,
    this.tempInfo.shopId = this.$route.query.shopId;
    this.loadProductInfo();
  }
}
</script>

<style scoped>
.goodsAll{
  margin-bottom: 15vw;
}
.goodsAll p{
  font-size: 3vw;
  color: gray;
  margin: 1vw 0;
}
.goodsAll ul li{
  display: flex;
  box-sizing: border-box;
}
.goodsAll ul li img{
  width: 15vw;
  margin: 5vw;
  flex: 0 0 20vw;
}
.goodsAll .goodsBrief{
  flex: 0 0 52vw;
  margin: 5vw 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.goodsBrief .goodsName{
  color: black;
  font-size: 4vw;
  font-weight: bold;
}
.goodsNum{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
.goodsNum .goodsMin{
  font-size: 5vw;
}
.goodsNum .goodsMin i{
  color: #666666;
}
.goodsNum .goodsAdd{
  font-size: 5vw;
}
.goodsNum .goodsAdd i{
  color: #0097FF;
  position: relative;
}
</style>